<style>
  .companyContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -20px;
  }

  .companyContainer .companyItem {
    min-width: 200px;
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
  }

  .company_list {
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(153, 153, 153, .5);
    border-radius: 6px;
    position: absolute;
    top: -2px;
  }

  .WSN {
    white-space: nowrap;
  }

  .WSY {
    white-space: wrap;
  }

  .tree-padding-6{
    padding-left:60px;
  }
  .tree-padding-7{
    padding-left:70px;
  }
  .tree-padding-8{
    padding-left:80px;
  }

  .ellipsis-1 {
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    overflow: hidden;
  }


</style>
<div id="main">
  <!-- 系统组织 -->
  <div class="main_left">
    <section id="userL_rbac">
      <div class="clearfix" id="allheight" style="height:100%;border: 1px solid #ddd">
        <!-- 组织部分 -->
        <div class="userL_left-tissue" style="padding-bottom: 46px">
          <div class="usertissue-button-wrap">
            <div class="usertissue-button cursor" :class="{'usertissue-button-active': (memberActive == item.orgType) && memberData.length > 1}" @click="tabNav(item)" v-for="item in memberData">{{item.shortName}}</div>
          </div>
          <div class="usertissue-list">
            <ul class="userframework-tree-wrap">
              <treerbacs class="rbac-tissue" :key="index" @change="getPidData" :model="treeList" @gettype="getmenberType"></treerbacs>
            </ul>
            <div class="userslideTop"></div>
            <div style="padding-left: 10px;margin-top: 20px;" v-show="permissions.indexOf('c180') > -1 && isShowAddInput ">
              <div class="add_editRrea" v-if="newAddInnput">
                <input type="text" v-model="newEditName">
                <span class="icon-Gm-confirm icon-color mr-5" @click="sureAdd"></span>
                <span class="icon-Gm-cancel icon-color" @click="closeAddInput"></span>
              </div>
              <div class="add_but" @click="openAddInput" v-show="isShowAddBtn">新增</div>
            </div>

            <div class="setmemberType" v-if="memberActive == 'DD' &&  treeList.length != 0">
              设置组织类型
              <ul>
                <li @click="setmemberType('S','员工')">员工</li>
                <li @click="setmemberType('C','客户')">客户</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- 外部组织 -->
  <div class="main_right">
    <div class="clearfix " id="userList">
      <!-- 组织成员列表  -->
      <div class="main_right_title">
        <div class="memberList">
          <ul style="color:#A5AAB7" class="dy-flex">组织成员列表</ul>
          <ul class="iconBox">
            <li @click="judeg_selected_org">
              <span class="icon-Org-account color-primary"></span>
              <span>添加成员</span>
            </li>
            <li @click="clearItem('item')">
              <span class="icon-Gm-delete color-primary"></span>
              <span>去除成员</span>
            </li>
          </ul>
        </div>

        <ul>
          <li class="menberDetail" v-for="(item,index) in menberList" :class="{'selecteitem':menberitem == index}" @click="menberitem = index">
            <span>{{item.memberName}}</span>
            <span>{{item.userAccount}}</span>
            <span>{{item.orgUserType}}</span>
          </li>
        </ul>
      </div>
      <!-- 用户信息  -->
      <div class="pl-24 pr-24 search_list" style="padding:0px;margin-left:10px;">
        <div class="userhl-list-title">
          <h4 style="color:#A5AAB7" class="dy-flex"> 用户信息</h4>
          <div>
            <span class="icon-Org-account color-primary"></span>
            <button type="button" class="btn s-btn-outline" @click="createPop = true">新增用户</button>
          </div>
          <div>
            <span class="icon-uniE94B color-primary"></span>
            <button type="button" class="btn s-btn-outline" @click="ddSynchronizeUsers">同步用户</button>
          </div>
        </div>

        <div class="useruser-search-wrap ptb-10 clearfix" style="padding-left:10px;">
          <form>
            <div class="create-date pull-left pr-12 mr-10 font-14" style="color:#CFCFCF">
              <span class="pr-12 mr-10">信息搜索</span>
              <span class="pr-12 mr-10" style="margin-left:150px">创建时间</span>
            </div>
            <div class="user-search pull-left">
              <span class="search_name_com">
                <span class="icon-Gm-search"></span>
              <input type="text" class="css-width js-val-info" placeholder="姓名/公司名/联系方式" style="width: 190px;border: none" />
              </span>
              <label class="icon-Gm-calendar relative dt-r">
                                <input type="text" class="inp-w inp" name="beginTime" readonly placeholder="起始日期" />
                            </label>
              <span style="width:10px;" class="inline text-center line-height-34">-</span>
              <label class="icon-Gm-calendar relative dt-r">
                <input type="text" class="inp-w inp" name="endTime" readonly placeholder="截止日期" />
              </label>
              <hl-button size="mini" @on-click="search">查询</hl-button>
              <hl-button size="mini" @on-click="reset">重置</hl-button>
            </div>
          </form>
        </div>

        <div class="user-result-wrap  br-4 global_table" style="margin:0 10px;border:1px solid rgba(229,229,229,1);border-radius:4px;">
          <ul class="clearfix border-b color-gray dy-flex aboutNthChild global_table_title" style="background: #F0F2FF;">
            <li>序</li>
            <li>联系人</li>
            <li>账号</li>
            <li>联系方式</li>
            <li>组织</li>
            <li>创建时间</li>
            <li v-if="permissions.indexOf('c25') > -1">状态</li>
            <li class="border-l">操作</li>
          </ul>
          <div>
            <ul class="clearfix user-content dy-flex aboutNthChild global_table_item" v-for="(item,index) in userData.users">
              <li>{{index + 1
                < 10 ? '0' + (index + 1) : index + 1 }}</li>
                  <li :title="item.name">{{item.name}}</li>
                  <li :title="item.account">{{item.account}}</li>
                  <li :title="item.phone">{{item.phone}}</li>
                  <div class="relative companyArea" style="width:120px;">
                    <div class="company">
                      {{item.organization[0] ? item.organization[0].join(' -- ') : '--'}}
                    </div>
                    <ul v-if="item.organization.length>0">
                      <div class="companyContainer">
                        <div class="arrowicon3"><img src="assets/images/range_arrow.png" alt=""></div>
                        <div class="company_list">
                          <div class="companyItem" v-for="single in item.organization" :class="single.join(' -- ').length>28?'WSY':'WSN'">{{single.join(' -- ')}}</div>
                        </div>
                      </div>
                    </ul>
                  </div>
                  <li>{{item.createTime | formatDate}}</li>
                  <li v-if="permissions.indexOf('c25') > -1">{{item.valid === 'Y' ? '启用' : '停用'}}
                  </li>
                  <li class="border-l">
                    <button class="js-state" v-if="permissions.indexOf('c25') > -1 " @click="updateState(item.valid,item.id,index)">{{item.valid
                                      === 'Y' ? '停用' : '启用'}}</button>
                    <button class="js-edit" v-if="permissions.indexOf('c24') > -1 && memberActive == 'WX' " @click="editUserMes(item.id)">编辑</button>
                  </li>
            </ul>
          </div>

        </div>

        <div class="js-show-title hide br-4"></div>

        <div class="user-page ptb-10 clearfix" style="padding:10px 10px 50px 10px">
          <div class="pull-left user-page-num">
            <span class="font-14">共<i>{{userData.totalCount}}</i>条记录</span>
            <span>每页<div class="select-ul pagenums"><span class="select-name br-4 box-i-shadow">{{limit}}</span>
            <ul>
              <li :data-value="item" v-for="item in pageLimits" @click="updateLimit(item)">{{item}}</li>
            </ul>
          </div>
          条
          </span>
        </div>
        <div class="pull-right">
          <hl-pagination v-model="curPage" :total="totalPage" @change="getSearchUserData"></hl-pagination>
        </div>
      </div>
    </div>
    <!-- 员工与客户之间的互相切换警告 -->
    <div v-show="setSC" class="pop add-account-pop box-o-shadow setSC" style="width:400px;height:200px;">
      <ul>请确认更改该组织类型为</ul>
      <ul>{{SCtext}}</ul>
      <ul>更改后组织下所有的成员类别将发生变化</ul>
      <ul>
        <li @click="sureSetSC">确认更改</li>
        <li @click="cancleSetSC" style="background-color: #f8f8f8;color: #666;">取消</li>
      </ul>
    </div>
    <!-- 添加成员 -->
    <div v-show="creatNewmenber && menberTypeId" class="appendMenber ">
      <div class="appendMenber_left">
        <div class="appendMenber_left_heder">
          添加成员
          <span style="float:right;cursor: pointer;" @click="creatNewmenber = false">×</span>
        </div>
        <div class="appendMenber_left_body">
          <div class="ALB_search">
            <div>
              <span class="icon-Gm-search"></span>
              <input type="text" placeholder="搜索成员" v-model="searchmember" class="">
            </div>
            <button class="s-btn-default btn" @click="getSearchUserData1">查询</button>
          </div>
          <div class="ALB_body">
            <div style="margin-right:21px">
              <div class="ALB_title">可添加成员</div>
              <div class="ALB_List">
                <ul class="auth-config-pop singleTel">
                  <span class="auth-item" :class="{'js-q-active':allSelected == true}" @click="allSelectedfun"></span>
                  <li>账号</li>
                  <!-- <li>类别</li> -->
                  <li>姓名</li>
                  <li>归属</li>
                </ul>
                <ul class="auth-config-pop singleTel" v-for="(item,index) in userData1.users">
                  <span class="auth-item" :class="{'js-q-active':item.selected == true}" @click="selectItem(index)"></span>
                  <li>{{item.account}}</li>
                  <!-- <li>类别</li> -->
                  <li>{{item.name}}</li>
                  <li>
                    <span v-for="(single,singindex) in item.organization">{{single.join('--')}}<span v-if="singindex != item.organization.length-1">,</span></span>
                  </li>
                </ul>
              </div>
            </div>
            <div>
              <div class="ALB_title">已选成员</div>
              <div class="ALB_List" style="width:190px">
                <ul class="hasEdit">
                  <li>序</li>
                  <li>姓名</li>
                  <li>操作</li>
                </ul>
                <ul class="hasEdit" v-for="(item,index) in selectedList">
                  <li>{{index+1}}</li>
                  <li>{{item.name}}</li>
                  <li class="icon-Gm-delete icon-color cursor" @click="delsingle(item)"></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <ul class="ALB_footer">
          <button type="button" class="btn n-btn-primary" style="margin-right:50px" @click="sureAddmenber">保存</button>
          <button type="button" class="btn n-btn-outline" @click="cancle">取消</button>
        </ul>
      </div>
    </div>

    <!-- 删除提示 -->
    <div class="pop add-account-pop box-o-shadow delwarm" v-if="delwarm" style="width:400px;height: 200px">
      <div class="delwarmArea">
        <ul class="delwarmtext">确定删除吗？</ul>
        <ul class="deloperate">
          <li @click="suerDel">确定</li>
          <li @click="delwarm = false">取消</li>
        </ul>
      </div>
    </div>

    <!--新增账号-->
    <hl-dialog :visible="createPop" title="新增用户" @on-close="closeCreatePop">
      <form>
        <hl-row class="mb-10">
          <hl-col :span="4" class="line-height-34"><span class="required">*</span>账号：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" v-model="addUser.account">
          </hl-col>
        </hl-row>
        <hl-row class="mb-10">
          <hl-col :span="4" class="line-height-34"><span class="required">*</span>密码：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" v-model="addUser.passwd">
          </hl-col>
        </hl-row>
        <hl-row class="mb-10">
          <hl-col :span="4" class="line-height-34"><span class="required">*</span>联系人：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" v-model="addUser.name">
          </hl-col>
        </hl-row>
        <hl-row class="mb-10">
          <hl-col :span="4" class="line-height-34"><span class="required">*</span>联系方式：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" v-model="addUser.phone">
          </hl-col>
        </hl-row>
        <hl-row class="mb-10">
          <hl-col :span="4" class="line-height-34">邮箱：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" v-model="addUser.email">
          </hl-col>
        </hl-row>
        <hl-row class="mb-10" v-if="permissions.indexOf('c332') > -1">
          <hl-col :span="4" class="line-height-34">第三方平台ID：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" v-model="addUser.ref_identifier">
          </hl-col>
        </hl-row>
      </form>

      <div slot="footer">
        <hl-button type="primary" @on-click="confirmCreateUser">确认保存</hl-button>
      </div>
    </hl-dialog>

    <!--编辑账号-->
    <hl-dialog :visible="editPop" title="编辑用户" @on-close="editPop = false">
      <form>
        <hl-row class="mb-10">
          <hl-col :span="4" class="line-height-34"><span class="required">*</span>账号：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" v-model="editUser.account" readonly>
          </hl-col>
        </hl-row>
        <hl-row class="mb-10" v-if="memberActive == 'WX'">
          <hl-col :span="4" class="line-height-34"><span class="required">*</span>密码：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" placeholder="******" v-model="psd">
          </hl-col>
        </hl-row>
        <hl-row class="mb-10">
          <hl-col :span="4" class="line-height-34"><span class="required">*</span>联系人：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" v-model="editUser.name">
          </hl-col>
        </hl-row>
        <hl-row class="mb-10">
          <hl-col :span="4" class="line-height-34"><span class="required">*</span>联系方式：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" v-model="editUser.phone">
          </hl-col>
        </hl-row>
        <hl-row class="mb-10">
          <hl-col :span="4" class="line-height-34">邮箱：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" v-model="editUser.email">
          </hl-col>
        </hl-row>
        <hl-row class="mb-10" v-if="permissions.indexOf('c332') > -1">
          <hl-col :span="4" class="line-height-34">第三方平台ID：</hl-col>
          <hl-col :span="8">
            <input type="text" class="form-control" v-model="editUser.refIdentifier">
          </hl-col>
        </hl-row>
      </form>

      <div slot="footer">
        <hl-button type="primary" @on-click="confirmEditUser">确认保存</hl-button>
      </div>
    </hl-dialog>

    <!-- 企业绑定 -->
    <div class="pop box-o-shadow ddqy-pop" v-show="isShowQyLayer" style="width:600px;">
      <div class="head-pop font-16"><span>企业绑定</span>
        <button class="fw-close absolute close" type="button" @click="closeQyLayer">×</button>
      </div>
      <div class="content-pop">
        <div class="content" style="padding:40px 45px;">
          <div style="margin-bottom:20px;">
            <div class="dy-flex mb-10">
              <div class="dy-fx-1 line-height-34 ">AgentId:</div>
              <div class="dy-fx-3">
                <input type="text" class="form-control agentId-ipt" v-model="agentId" style="width:200px;" @blur="validateAgentId">
              </div>
            </div>
            <div class="dy-flex mb-10">
              <div class="dy-fx-1 line-height-34 ">AppKey:</div>
              <div class="dy-fx-3">
                <input type="text" class="form-control appKey-ipt" v-model="appKey" style="width:200px;" @blur="validateAppKey">
              </div>
            </div>
            <div class="dy-flex">
              <div class="dy-fx-1 line-height-34 ">AppSecret:</div>
              <div class="dy-fx-3">
                <input type="text" class="form-control appSecret-ipt" v-model="appSecret" style="width:200px;">
              </div>
            </div>
          </div>

          <p style="margin-bottom:20px;">以上内容将用于同步用户到系统以及后续的消息通知与账号免登录，获取步骤如下:</p>
          <p>1.钉钉主管理员在电脑访问https://open-dev.dingtalk.com/。</p>
          <p>2.进入“应用开发”-“开发账号管理”菜单。</p>
          <p>3.页面右侧“企业接口调用AppSecret”中的数据即为当前所需。</p>
        </div>
      </div>
      <div class="fw-button">
        <button type="button" class="fw-submit yes mr-10" @click="confirmBindQy">确认</button>
        <button type="button" class="fw-submit no" @click="closeQyLayer">取消</button>
      </div>
    </div>

    <!-- 同步用户未绑定企业警告 -->
    <div v-if="bindwarm" class="pop add-account-pop box-o-shadow setSC" style="width:400px;height:200px;">
      <ul style="color:#fff">.</ul>
      <ul style="color:#565e99">无法同步用户</ul>
      <ul>系统未绑定钉钉团队</ul>
      <ul>
        <li @click="gotobind">前往绑定</li>
        <li @click=" bindwarm = false" style="    background-color: #f8f8f8;color: #666;">取消</li>
      </ul>
    </div>

    <!--遮罩-->
    <div class="backdrop" v-show="createPop"></div>
    <div class="backdrop" v-show="editPop"></div>
    <div class="backdrop" v-show="isShowQyLayer"></div>
    <div class="backdrop" v-show="creatNewmenber && menberTypeId"></div>
    <div class="backdrop" v-show="setSC"></div>
    <div class="backdrop" v-show="delwarm"></div>
    <div class="backdrop" v-show="bindwarm"></div>
  </div>
</div>

</div>


<script src="modules/user/scripts/resize.js" charset="utf-8"></script>
<script src="modules/user/scripts/organization_item.js" charset="utf-8"></script>
<script src="modules/user/scripts/organization_edit.js" charset="utf-8"></script>
<script src="modules/user/scripts/dd_account.js" charset="utf-8"></script>
<script src="modules/user/scripts/user_list.js" charset="utf-8"></script>
